<script setup>
// 组件引入
import addNoticeContent from '@/components/notice/addNotice.vue'
import { Plus, PieChart, View } from '@element-plus/icons-vue'
import UpdateNoticeCpn from '@/components/main/updateNotice.vue'
import HistoryNoticeCpn from '@/components/main/historyNotice.vue'
// 功能函数引入
import { onMounted, ref } from 'vue'
import { storeToRefs } from 'pinia';
import { useCommonStore } from '@/store/commonStore'
import { useUpdateNotice } from '@/store/super-manger/updateNoticeStore';

const commonStore = useCommonStore();
const updateNotice = useUpdateNotice();
const { noticeInfo, allNotices } = storeToRefs(updateNotice);
const { isShowCover, isShowAddNotice } = storeToRefs(commonStore)
const noticeBtnType = ref('check');

const addNotice = () => {
    isShowCover.value = true
    isShowAddNotice.value = true
}
// 获取最新公告内容
onMounted(() => {
    updateNotice.getNewNotice();
});


// link类型
const checkType = ref('primary');
const historyType = ref('default');


// 查看公告
const onCheckNotice = (type) => {
    noticeBtnType.value = type;
    checkType.value = 'primary';
    historyType.value = 'default';
}

// 历史公告内容
const onHistoryClick = (type) => {
    noticeBtnType.value = type
    checkType.value = 'default';
    historyType.value = 'primary';
    // 1、发送网络请求获取所有的历史记录
    updateNotice.getAllNotice();
}

</script>

<template>
  <div class="main_home main_content">
    <div class="btns">
        <el-button type="success" @click="addNotice">
            <el-icon><Plus /></el-icon>
             <span>发布公告</span>
        </el-button>
        <div class="check">
            <el-link 
                :type="checkType" 
                @click="onCheckNotice('check')"
                :underline="false"
            >
                <el-icon><View /></el-icon>
                查看公告
            </el-link>
        </div>  
        <div class="history">
            <el-link 
                :type="historyType" 
                @click="onHistoryClick('history')"
                :underline="false"
            >
                <el-icon><PieChart /></el-icon>
                历史记录
            </el-link>
        </div>
    </div>
    <!-- 发布公告内容 -->
    <transition name="flag">    
        <addNoticeContent v-if="isShowAddNotice"/>
    </transition>
    <div class="notice_area">
        <template v-if="noticeInfo && noticeBtnType === 'check'">
            <update-notice-cpn :noticeInfo="noticeInfo"/>
        </template>
        <template v-else-if="noticeBtnType === 'history'">
           <history-notice-cpn :allNotices="allNotices"/>
        </template>
    </div>
  </div>
</template>

<style scoped lang="less">
.main_home {
.btns {
    display: flex;
    align-items: center;
    margin: 20px;
    div {
        display: flex;
        align-items: center;
        padding: 5px 8px;
        &:nth-of-type(1) {
            margin: 0 10px;
        }
        .el-icon {
            margin-right: 5px;
        }
    }
}
    .notice_area {
        text-align: center;
        .title {
            font-size: var(--large-fontSize);
            color: #999;
        }
    }
}

// 表格
.el-table {
    margin: 20px auto;
}
.el-table thead {
    color: #000 !important;
}
</style>